<template>
  <div class="function-box">
    <div class="function-header">
      <div class="header-title">常用功能</div>
      <div class="header-arrow" @click="handleShowFunction">
        <i
          v-show="allCommon.length > funcLen"
          :class="{
            'fal fa-chevrons-down': !showStatus,
            'fal fa-chevrons-up': showStatus,
          }"
        ></i>
      </div>
    </div>
    <div class="function-content">
      <div
        v-show="commonList.length > 0 && !loading"
        class="function-main"
        :class="{ 'function-warp': showStatus }"
      >
        <div
          v-for="comItem in commonList"
          :key="comItem.JE_CORE_MENU_ID"
          class="function-item"
          @click="jumpMenu(comItem.JE_CORE_MENU_ID)"
        >
          <div class="item-icon" :style="{ 'background-color': comItem.MENU_BGCOLOR }">
            <i :class="comItem.MENU_ICON"></i>
          </div>
          <div class="item-name">{{ comItem.MENU_MENUNAME }}</div>
        </div>
      </div>
      <div v-show="commonList.length == 0 && !loading" class="no-function">暂无数据</div>
      <div v-loading="loading"></div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  import { useMicroStore } from '@common/store/micro-store';
  import { GetBoardHomeCommon } from '@/api';
  import { useGlobalStore } from '@common/store/global-store';

  export default defineComponent({
    name: 'CommonFunction',
    setup() {
      const microStore = useMicroStore();
      const globalStore = useGlobalStore();
      let loading = ref(true); //请求数据loading
      let showStatus = ref(false); //常用功能展开状态
      const state = reactive({
        funcLen: 8, //每行显示最多个数
        allCommon: [], //所有常用功能
        commonList: [], //页面显示的常用功能
      });
      const methods = {
        handleShowFunction() {
          showStatus.value = !showStatus.value;
          if (showStatus.value) {
            state.commonList = [...state.allCommon];
          } else {
            state.commonList = state.allCommon.slice(0, state.funcLen);
          }
        },
        getCommonList() {
          //获取常用功能列表
          GetBoardHomeCommon({ plan: globalStore.activePlan }).then((res) => {
            if (res.code == 1000 && res.success) {
              state.allCommon = res.data;
              if (state.allCommon.length <= state.funcLen) {
                state.commonList = [...state.allCommon];
              } else {
                state.commonList = state.allCommon.slice(0, state.funcLen);
              }
              setTimeout(() => {
                loading.value = false;
              }, 100);
            }
          });
        },
        jumpMenu(menuId) {
          //跳转到对应功能模块
          microStore.emitAdmin('admin-openmenu', { menuId: menuId });
        },
      };
      onBeforeMount(() => {});
      onMounted(() => {
        methods.getCommonList();
      });
      return {
        loading,
        showStatus,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .function-box {
    width: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    .function-header {
      width: calc(100% - 40px);
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #ecedf0;
      margin: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-title {
        font-size: 18px;
        font-weight: bold;
      }
      .header-arrow {
        cursor: pointer;
        font-size: 16px;
        color: #8d98ab;
      }
    }
    .function-content {
      width: 100%;
      max-height: auto;
      position: relative;
    }
    .function-content::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .function-main {
      width: 100%;
      padding: 15px 28px 0;
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      box-sizing: border-box;
      .function-item {
        width: 84px;
        margin: 0 12px 20px;
        flex-shrink: 0;
        cursor: pointer;
        .item-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 auto;
          background-color: #f24f54;
          position: relative;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          i {
            font-size: 20px;
            color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .item-name {
          width: 100%;
          line-height: 20px;
          font-size: 14px;
          text-align: center;
          margin-top: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }
      }
    }
    .function-warp {
      flex-wrap: wrap;
    }
    .no-function {
      width: 100%;
      height: 124px;
      line-height: 124px;
      color: #8d98ab;
      font-size: 14px;
      text-align: center;
    }
  }
</style>
